<template>
    <view class="app-diy-page" v-bind:class="mp_link_top ? 'mp_link_top' : ''" :style="pageScroll">
        <view class="nav-bar dir-left-nowrap" v-bind:class="mp_link_top ? 'mp_link_top' : ''"
              v-if="newData.show_navs == 1">
            <block v-for="(nav, index) in newData.navs" :key="index">
                <view class="nav-bar-one cross-center box-grow-0"
                      v-bind:class="nav_active === index ? 'active' : ''"
                      :style="{'color': nav_active === index ? theme.color : ''}"
                      v-on:click='changeNav(index)'
                >
                    {{ nav.name }}
                </view>
            </block>
        </view>
        <view class="diy-template">
            <block v-for="(item, index) in newData.navs" :key="index">
                <template v-if="nav_active === index">
                    <block v-for="(temp, temp_index) in item.template.data" :key="temp_index">
                        <template v-if="temp.id === 'background'">
                            <view
                                class="app-diy-bg"
                                :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                        ]"
                            ></view>
                        </template>

                        <!--搜索-->
                        <template v-else-if="temp.id === 'search'">
                            <app-search-for v-bind:value="temp.data"></app-search-for>
                        </template>

                        <!--轮播图-->
                        <template v-else-if="temp.id === 'banner'">
                            <template v-if="temp.data.banners.length > 0">
                                <view v-if="temp.data.effect == 1 || !temp.data.effect"
                                      :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                >
                                    <app-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        name="pic_url"
                                        :effect3d="temp.data.style === 2 ? true : false"
                                        :height="temp.data.height"
                                        :effect3dPreviousMargin="50"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    ></app-swiper>
                                </view>
                                <view
                                    :style="{backgroundColor: temp.data.bg_padding, padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}"
                                    v-if="temp.data.effect == 2">
                                    <u-swiper
                                        :style="{height: temp.data.height + 'rpx'}"
                                        :list="temp.data.banners"
                                        name="pic_url"
                                        :height="temp.data.height"
                                        :interval="temp.data.interval ? temp.data.interval : 3000"
                                        :duration="temp.data.duration ? temp.data.duration : 500"
                                        :mode="temp.data.mode"
                                        :imgMode="temp.data.fill === 0 ? 'aspectFit' : 'scaleToFill'"
                                        :autoplay="temp.data.autoplay === 0 ? true : false"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                    >
                                    </u-swiper>
                                </view>
                            </template>
                        </template>

                        <!-- 普通商品列表 -->
                        <template v-else-if="temp.id === 'goods'">
                            <view
                                :style="[
                            {'background-color':`${temp.data.backgroundColor}`,
                            'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,

                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}
                        ]">
                                <template v-if="temp.data.catPosition === 'top'">
                                    <!--分类-->
                                    <template v-if="temp.data.showCat && temp.data.catList && temp.data.catList.length > 1">
                                        <scroll-view scroll-x :style="{backgroundColor: temp.data.catBgColor}"
                                                     style="margin-bottom: 12rpx"
                                                     scroll-with-animation
                                                     :scroll-left="temp.data.scrollLeft"
                                                     v-bind:class="[theme, 'u-scroll-view', 'dir-left-nowrap']">
                                            <text
                                                :id="`scroll-${catIndex}`"
                                                v-for="(catItem, catIndex) in temp.data.catList"
                                                v-bind:key="catIndex"
                                                v-bind:class="[
                                                    temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current-round'  :
                                                    temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex ?
                                                    'u-active-current': 'u-default-text',
                                                    temp.data.catStyle === 2 ? 'u-current-round' : '',
                                                    'u-nav-item'
                                                ]"
                                                v-bind:style="temp.data.catStyle === 2 && temp.data.activeCurrent === catIndex ? `background-color: ${temp.data.tagColor ? temp.data.tagColor : theme.background};color: ${temp.data.catSelectedColor};`
                                                    : temp.data.catStyle === 1 && temp.data.activeCurrent === catIndex  ? `color: ${temp.data.catSelectedColor ? temp.data.catSelectedColor : theme.color};border-color: ${temp.data.tagColor ? temp.data.tagColor : theme.border}`
                                                    : temp.data.catStyle === 1 ? `color: ${temp.data.catUnselectedColor}`: `color: ${temp.data.catUnselectedColor}`"
                                                v-on:click="changeTopNav(catIndex,temp.data)"
                                            >
                                                {{ catItem.menuName }}
                                            </text>
                                        </scroll-view>
                                    </template>
                                    <app-diy-list :list="temp.data.list" :temp="temp" :theme="theme"></app-diy-list>
                                </template>

                                <template v-else>                             
                                    <app-recommended-product-list
                                        v-bind:show-cat="temp.data.showCat"
                                        v-bind:show-buy-btn="temp.data.showBuyBtn"
                                        v-bind:cat-style="temp.data.catStyle"
                                        v-bind:cat-list="temp.data.catList"
                                        v-bind:list="temp.data.list" :list-style="temp.data.listStyle"
                                        v-bind:goods-cover-proportion="temp.data.goodsCoverProportion"
                                        v-bind:fill="temp.data.fill" :goods-style="temp.data.goodsStyle"
                                        v-bind:show-goods-name="temp.data.showGoodsName"
                                        v-bind:show-goods-price="temp.data.showGoodsPrice"
                                        v-bind:buy-btn="temp.data.buyBtn" :sign="temp.id"
                                        v-bind:buy-btn-style="temp.data.buyBtnStyle"
                                        v-bind:buy-btn-text="temp.data.buyBtnText"
                                        v-bind:show-goods-tag="temp.data.showGoodsTag"
                                        v-bind:customize-goods-tag="temp.data.customizeGoodsTag"
                                        v-bind:goods-tag-pic-url="temp.data.goodsTagPicUrl"
                                        v-bind:button-color="temp.data.buttonColor"
                                        v-bind:is-under-line-price="temp.data.isUnderLinePrice"
                                        v-bind:theme="theme"
                                        v-bind:cat-position="temp.data.catPosition"
                                        v-on:buyProduct="buyProduct"
                                        v-bind:tag-color="temp.data.tagColor"
                                        v-bind:cat-selected-color="temp.data.catSelectedColor"
                                        v-bind:cat-unselected-color="temp.data.catUnselectedColor"
                                        v-bind:cat-bg-color="temp.data.catBgColor"
                                        v-bind:bg="temp.data.bg"
                                        v-bind:c-border-bottom="temp.data.c_border_bottom"
                                        v-bind:c-border-top="temp.data.c_border_top"
                                        v-bind:c-padding-lr="temp.data.c_padding_lr"
                                    ></app-recommended-product-list>
                                </template>
                            </view>
                        </template>

                        <template
                            v-else-if="['miaosha', 'flash-sale'].indexOf(temp.id) !== -1 && temp.data.addGoodsType == 0">
                            <app-diy-m-goods-list
                                v-bind:mTitle="temp.data.mTitle"
                                v-bind:mColor="temp.data.mColor"
                                v-bind:mTitleSecondColor="temp.data.mTitleSecondColor"
                                v-bind:mBgType="temp.data.mBgType"
                                v-bind:mBgColor="temp.data.mBgColor"
                                v-bind:mBgGradientColor="temp.data.mBgGradientColor"
                                v-bind:mTimeColor="temp.data.mTimeColor"
                                v-bind:mTimeBgColor="temp.data.mTimeBgColor"
                                v-bind:mGoodsBgColor="temp.data.mGoodsBgColor"
                                v-bind:showGoodsName="temp.data.showGoodsName"
                                v-bind:showGoodsPrice="temp.data.showGoodsPrice"
                                v-bind:showGoodsTag="temp.data.showGoodsTag"
                                v-bind:customizeGoodsTag="temp.data.customizeGoodsTag"
                                v-bind:goodsTagPicUrl="temp.data.goodsTagPicUrl"
                                v-bind:isUnderLinePrice="temp.data.isUnderLinePrice"
                                v-bind:backgroundColor="temp.data.backgroundColor"
                                v-bind:showProgressBar="temp.data.showProgressBar"
                                v-bind:mData="temp.data.mData"
                                v-bind:sign="temp.id"
                                v-bind:theme="theme"
                                v-bind:bg="temp.data.bg"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                            ></app-diy-m-goods-list>
                        </template>
                        <!-- 插件商品列表 -->
                        <template
                            v-else-if="['weekly-buy','pintuan','advance', 'wholesale', 'gift', 'booking', 'pick','bargain','composition','lottery','flash-sale','miaosha','integral-mall', 'step','exchange'].indexOf(temp.id) !== -1">
                            <view v-if="temp.data.listStyle != 0" :style="{'padding': temp.data.c_padding_top + 'rpx ' + temp.data.c_padding_lr + 'rpx ' + temp.data.c_padding_bottom + 'rpx','background-color': temp.data.backgroundColor}">
                                <view style="width: 100%;" v-if="temp.id === 'integral-mall' && temp.data.showCoupon && temp.data.coupon_list && temp.data.coupon_list.length > 0">
                                    <app-exclusive-coupon
                                        v-bind:none-color="true"
                                        v-bind:list="temp.data.coupon_list"
                                        v-bind:sign="temp.id"
                                        v-bind:text-color="temp.data.couponColor"
                                        v-bind:show-top="false"
                                        v-bind:coupon_req="coupon_req"
                                        v-bind:unclaimed-bg="temp.data.couponPicUrl"
                                        v-bind:padding="temp.data.c_padding_lr"
                                    ></app-exclusive-coupon>
                                </view>
                                <app-diy-list :temp="temp" :theme="theme"></app-diy-list>
                            </view>
                            <view v-else :style="{'background-color': temp.data.backgroundColor,'padding': temp.data.c_padding_top + 'rpx 0 ' + temp.data.c_padding_bottom + 'rpx'}">
                                <view style="width: 100%;" v-if="temp.id === 'integral-mall' && temp.data.showCoupon && temp.data.coupon_list && temp.data.coupon_list.length > 0">
                                    <app-exclusive-coupon
                                        v-bind:none-color="true"
                                        v-bind:list="temp.data.coupon_list"
                                        v-bind:sign="temp.id"
                                        v-bind:text-color="temp.data.couponColor"
                                        v-bind:show-top="false"
                                        v-bind:coupon_req="coupon_req"
                                        v-bind:unclaimed-bg="temp.data.couponPicUrl"
                                        v-bind:padding="temp.data.c_padding_lr"
                                    ></app-exclusive-coupon>
                                </view>
                                <view :style="{'padding': '0 ' + temp.data.c_padding_lr + 'rpx'}">
                                    <app-diy-list :temp="temp" :theme="theme"></app-diy-list>
                                </view>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'rubik'">
                            <view style="position: relative;overflow: hidden;">
                                <app-image-ad
                                    v-bind:image-style="temp.data.style"
                                    v-bind:list="temp.data.list"
                                    v-bind:height="temp.data.height"
                                ></app-image-ad>
                                <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                    <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                                </block>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'notice'">
                            <u-announcement
                                v-bind:bgColor="temp.data.background"
                                v-bind:btn-color="temp.data.btnColor"
                                v-bind:btn-height="temp.data.btnHeight"
                                v-bind:btn-radius="`${temp.data.btnRadius}rpx`"
                                v-bind:btn-text="temp.data.btnText"
                                v-bind:btn-text-color="temp.data.btnTextColor"
                                v-bind:btn-width="temp.data.btnWidth"
                                v-bind:content="temp.data.content"
                                v-bind:header-url="temp.data.headerUrl"
                                v-bind:icon="temp.data.icon"
                                v-bind:name="temp.data.name"
                                v-bind:textColor="temp.data.textColor"
                            ></u-announcement>
                        </template>

                        <template v-else-if="temp.id === 'nav'">
                            <!-- 新数据 -->
                            <template v-if="temp.data.modeType">
                                <app-navigation-two-icon
                                    v-bind:mode-type="temp.data.modeType"
                                    v-bind:background="temp.data.backgroundColor"
                                    v-bind:color="temp.data.color"
                                    v-bind:navs="temp.data.navs"
                                    v-bind:columns="temp.data.columns"
                                    v-bind:temp-index="temp_index"
                                    v-bind:nav-type="temp.data.navType"
                                    v-bind:alone-num="temp.data.aloneNum"
                                    v-bind:line-num="temp.data.lineNum"
                                    v-bind:swiper-type="temp.data.swiperType"
                                    v-bind:swiper-color="temp.data.swiperColor"
                                    v-bind:swiper-no-color="temp.data.swiperNoColor"
                                    :img-height="temp.data.imgHeight"
                                    :bg-type="temp.data.bgType"
                                    :background-pic-url="temp.data.backgroundPicUrl"
                                ></app-navigation-two-icon>
                            </template>

                            <!-- 老数据 -->
                            <template v-else>
                                <view
                                    :style="[
                                        {'background-color':`${temp.data.backgroundColor}`,
                                        'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                        'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                        'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                        'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                                >
                                    <app-navigation-icon
                                        v-bind:background="''"
                                        v-bind:color="temp.data.color"
                                        v-bind:rows="temp.data.rows"
                                        v-bind:columns="temp.data.columns"
                                        v-bind:scroll="temp.data.scroll"
                                        v-bind:navs="temp.data.navs"
                                    ></app-navigation-icon>
                                </view>
                            </template>
                        </template>

                        <template v-else-if="temp.id === 'video'">
                            <app-video
                                v-bind:pic-url="temp.data.pic_url"
                                v-bind:url="temp.data.url"
                                v-bind:height="temp.data.height ? temp.data.height + 'rpx' : '400rpx'"
                                v-bind:has-auto="temp.data.hasAuto"
                                v-bind:has-cycle="temp.data.hasCycle"
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                            ></app-video>
                        </template>

                        <template v-else-if="temp.id === 'link'">
                            <app-associated-link
                                v-bind:arrows-switch="temp.data.arrowsSwitch"
                                v-bind:background="temp.data.background"
                                v-bind:color="temp.data.color"
                                v-bind:position="temp.data.position"
                                v-bind:style-color="temp.data.styleColor"
                                v-bind:link="Object.assign({}, temp.data.link)"
                                v-bind:styleNum="temp.data.style"
                                v-bind:pic-switch="temp.data.picSwitch"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:font-size="temp.data.fontSize"
                                v-bind:title="temp.data.title"
                            ></app-associated-link>
                        </template>

                        <template v-else-if="temp.id === 'topic'">
                            <template v-if="temp.data.style === 'normal'">
                                <app-special-topic
                                    v-bind:count="temp.data.count"
                                    v-bind:icon="temp.data.icon"
                                    v-bind:logo_1="temp.data.logo_1"
                                    v-bind:logo_2="temp.data.logo_2"
                                    v-bind:topic_list="temp.data.topic_list"
                                ></app-special-topic>
                            </template>

                            <template v-else-if="temp.data.style === 'list'">
                                <app-special-topic-list
                                    v-bind:cat-show="temp.data.cat_show"
                                    v-bind:list="temp.data.list"
                                    v-bind:theme="theme"
                                    v-bind:topic-list="temp.data.topic_list"
                                    v-bind:tag-color="temp.data.tagColor"
                                    v-bind:cat-selected-color="temp.data.catSelectedColor"
                                    v-bind:cat-unselected-color="temp.data.catUnselectedColor"
                                    v-bind:cat-bg-color="temp.data.catBgColor"
                                ></app-special-topic-list>
                            </template>
                        </template>

                        <template v-else-if="temp.id === 'store'">
                            <app-shop
                                v-bind:list="temp.data.list"
                                v-bind:nav-pic-url="temp.data.navPicUrl"
                                v-bind:score-pic-url="temp.data.scorePicUrl"
                                v-bind:show-name="temp.data.showName"
                                v-bind:show-score="temp.data.showScore"
                                v-bind:show-tel="temp.data.showTel"
                                v-bind:scrollTop="scrollTop"
                            ></app-shop>
                        </template>

                        <template v-else-if="temp.id === 'copyright'">
                            <app-copyright
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:text="temp.data.text"
                                v-bind:pic-url="temp.data.picUrl"
                                v-bind:link="temp.data.link"
                            ></app-copyright>
                        </template>

                        <template v-else-if="temp.id === 'user-info'">
                            <app-user-center
                                v-bind:top-pic-url="temp.data.backgroundPicUrl"
                                v-bind:member-pic-url="userCenter.member_pic_url"
                                v-bind:top-style="temp.data.style"
                            ></app-user-center>
                        </template>

                        <template v-else-if="temp.id === 'user-order'">
                            <app-my-order
                                v-bind:order_bar="temp.data.navs"
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:theme="theme"
                            ></app-my-order>
                        </template>

                        <!-- 优惠券 -->
                        <template v-else-if="temp.id === 'coupon'">
                            <app-exclusive-coupon-two
                                background="#FFFFFF"
                                v-bind:list="temp.data.coupon_list"
                                v-bind:receive-bg="temp.data.receiveBg"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:unclaimed-bg="temp.data.unclaimedBg"
                                v-bind:coupon_req="coupon_req"
                                v-bind:coupon-bg="temp.data.couponBg ? temp.data.couponBg : `#D9BC8B`"
                                v-bind:coupon-bg-type="temp.data.couponBgType"
                                v-bind:add-type="temp.data.addType"
                                v-bind:page_id="page_id"
                                v-bind:template_id="Number.parseInt(item.template_id)"
                                v-bind:d-index="[nav_active,temp_index]"
                                v-bind:m-index="dIndex"
                                v-bind:d-type="dType"
                            ></app-exclusive-coupon-two>
                        </template>

                        <template v-else-if="temp.id === 'timer'">
                            <app-diy-timer
                                v-bind:info="temp.data"
                            ></app-diy-timer>
                        </template>

                        <template v-else-if="temp.id === 'mch'">
                            <view :style="[
                                {'background-color':`${temp.data.backgroundColor}`,
                                'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                                'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                            >
                                <app-goods-shop
                                    v-bind:card-style="temp.data.cardStyle"
                                    v-bind:background-color="temp.data.backgroundColor"
                                    type="diy"
                                    v-bind:border-color="temp.data.borderColor"
                                    v-bind:c-padding-cen="temp.data.c_padding_cen"
                                    v-bind:c-padding-lf="temp.data.c_padding_lf"
                                    v-bind:c-padding-tb="temp.data.c_padding_tb"
                                    v-bind:theme="theme"
                                    v-bind:mch_list="temp.data.list"
                                    v-bind:coupon_req="coupon_req"
                                    v-bind:is_required="is_required"
                                    v-bind:show-goods="temp.data.showGoods"
                                ></app-goods-shop>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'empty'">
                            <app-empty
                                v-bind:height="temp.data.height"
                                v-bind:background-color="temp.data.background"
                            ></app-empty>
                        </template>

                        <template v-else-if="temp.id === 'ad'">
                            <app-ad
                                v-bind:unit-id="temp.data.id"
                                v-bind:type="temp.data.type"
                                v-bind:coupon-url="coupon_url"
                                v-bind:video-url="temp.data.video_url"
                                v-bind:pic-url="temp.data.pic_url"
                                v-bind:coupon-params="item | getObje"
                            ></app-ad>
                        </template>

                        <template v-else-if="temp.id === 'modal'">
                            <app-popup-ad
                                v-bind:opened="temp.data.opened"
                                v-bind:times="temp.data.times"
                                v-bind:list="temp.data.list"
                                v-bind:multiple="true"
                                v-bind:is_storage="is_storage"
                                v-bind:mark="homePages.id + '-' + homePages.navs[nav_active].id + '-' + temp_index"
                            ></app-popup-ad>
                        </template>

                        <template v-else-if="temp.id === 'quick-nav' && temp.data.navSwitch == 1">
                            <app-quick-navigation
                                v-bind:value="temp.data"
                                v-bind:use-mall-config="temp.data.useMallConfig"
                            ></app-quick-navigation>
                        </template>

                        <!-- #ifdef MP-WEIXIN -->
                        <template v-else-if="temp.id === 'mp-link'">
                            <view v-bind:class="temp.data.position === 'top' ? `mp-link-top` : ``"
                                  v-bind:style="[{'top': hiddenHeight(temp.data.position)}]">
                                <official-account
                                    v-on:load="mpLink(temp.data.position)"
                                    v-on:error="mpLinkError"
                                ></official-account>
                            </view>
                        </template>
                        <!-- #endif -->
                        <!-- #ifdef H5 -->
                        <template v-if="temp.id === 'mp-link' && isWechat">
                            <view class="bd-attention">
                                <view class="bd-content">
                                    <view class="dir-left-nowrap main-between cross-center">
                                        <view class="dir-left-nowrap cross-center">
                                            <image class="bd-logo" :src="userInfo && userInfo.wechat_logo"></image>
                                            <view class="bd-name">{{ userInfo && userInfo.wechat_name }}</view>
                                        </view>
                                        <view class="bd-btn" @click="openAttention">去关注</view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <!-- #endif -->
                        <!-- #ifndef MP-TOUTIAO -->
                        <template v-else-if="temp.id === 'map'">
                            <app-map
                                v-bind:background-pic-url="temp.data.backgroundPicUrl"
                                v-bind:height="temp.data.height"
                                v-bind:latitude="temp.data.latitude"
                                v-bind:longitude="temp.data.longitude"
                                v-bind:margin-top="temp.data.marginTop"
                                v-bind:margin-top-color="temp.data.marginTopColor"
                                v-bind:padding-x="temp.data.paddingX"
                                v-bind:padding-y="temp.data.paddingY"
                            ></app-map>
                        </template>
                        <!-- #endif -->

                        <template v-else-if="temp.id === 'check-in'">
                            <app-check-in
                                v-bind:background-pic-url="temp.data.backgroundPicUrl"
                                v-bind:hotspot="temp.data.hotspot"
                                v-bind:show-text="temp.data.showText"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:text-position="temp.data.textPosition"
                            ></app-check-in>
                        </template>

                        <template v-else-if="temp.id === 'image-text'">
                            <view style="padding: 0 24rpx;" :style="{backgroundColor: temp.data.bg || 'inherit'}">
                                <app-rich v-bind:content='temp.data.content'></app-rich>
                            </view>
                        </template>

                        <template v-else-if="temp.id === 'form-module'">
                            <diy-form :template_message_list="homePages.template_message_list" :page-id="newData.id" v-bind:value="temp.data"></diy-form>
                        </template>
                        <template v-else-if="temp.id === 'form'">
                            <app-diy-form
                                v-bind:title="temp.name"
                                v-bind:list="temp.data.formDialog"
                                v-bind:item-padding-x="temp.data.inputPadding"
                                v-bind:item-margin-y="temp.data.marginBottom"
                                v-bind:item-height="temp.data.height"
                                v-bind:show-item-border="false"
                                v-bind:label-position="transLabelPosition(temp.data.style)"
                                v-bind:label-color="temp.data.inputLabel"
                                label-text-align="left"
                                v-bind:show-input-border="true"
                                v-bind:input-background="temp.data.inputBackground"
                                v-bind:input-border-color="temp.data.inputBorder"
                                v-bind:input-text-color="temp.data.inputText"
                                v-bind:input-placeholder-color="temp.data.inputTip"
                                v-bind:input-radius="temp.data.radius"
                                v-bind:show-submit="true"
                                v-bind:submit-url="diyFormSubmitUrl"
                                v-bind:submit-btn-text="temp.data.borderContent"
                                v-bind:submit-btn-height="temp.data.buttonHeight"
                                v-bind:submit-btn-padding="temp.data.buttonPadding"
                                v-bind:submit-btn-margin="temp.data.buttonMargin"
                                v-bind:submit-btn-radius="temp.data.buttonRadius"
                                v-bind:submit-btn-background="temp.data.borderBackground"
                                v-bind:submit-btn-border-color="temp.data.borderBorder"
                                v-bind:submit-btn-text-color="temp.data.borderText"
                                v-bind:background-color="temp.data.backgroundColor"
                                v-bind:background-image="temp.data.backgroundPicUrl"
                                v-bind:background-width="temp.data.backgroundWidth"
                                v-bind:background-height="temp.data.backgroundHeight"
                                v-bind:background-position="transLabelBackgroundPosition(temp.data.position)"
                                v-bind:background-repeat="transLabelBackgroundRepeat(temp.data.mode)"
                                v-bind:margin-top="temp.data.marginTop"
                                v-bind:margin-color="temp.data.marginColor"
                                v-bind:padding-top="temp.data.padding"
                                v-bind:padding-bottom="temp.data.padding"
                                v-bind:select-box-color="temp.data.selectBoxColor"
                            ></app-diy-form>
                        </template>

                        <!--超级会员卡组件-->
                        <template v-else-if="temp.id === 'vip-card'">
                            <view class="vip-card"
                                  :style="[
                            {'background-color':`${temp.data.background}`,padding: `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`}]">
                                <app-vip-card
                                    v-bind:value="temp.data" top="0"
                                    v-bind:c-border-bottom="temp.data.c_border_bottom"
                                    v-bind:c-border-top="temp.data.c_border_top"

                                ></app-vip-card>
                            </view>
                        </template>

                        <!--直播组件-->
                        <!--  #ifdef MP-WEIXIN -->
                        <template v-else-if="temp.id === 'live'">
                            <app-live v-bind:value="temp.data"></app-live>
                        </template>
                        <!-- #endif -->

                        <template v-else-if="temp.id === 'customer'">
                            <app-customer
                                v-bind:bg="temp.data.bg"
                                v-bind:bg-padding="temp.data.bg_padding"
                                v-bind:title="temp.data.title"
                                v-bind:title-color="temp.data.title_color"
                                v-bind:wechat="temp.data.wechat"
                                v-bind:wechat-color="temp.data.wechat_color"
                                v-bind:c-border-bottom="temp.data.c_border_bottom"
                                v-bind:c-border-top="temp.data.c_border_top"
                                v-bind:c-padding-top="temp.data.c_padding_top"
                                v-bind:c-padding-lr="temp.data.c_padding_lr"
                                v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                                v-bind:copy-bg="temp.data.copy_bg"
                                v-bind:copy-border="temp.data.copy_border"
                                v-bind:copy-color="temp.data.copy_color"
                                v-bind:copy-radius="temp.data.copy_radius"
                                v-bind:copy-title="temp.data.copy_title"
                                v-bind:save-bg="temp.data.save_bg"
                                v-bind:save-border="temp.data.save_border"
                                v-bind:save-color="temp.data.save_color"
                                v-bind:save-radius="temp.data.save_radius"
                                v-bind:save-title="temp.data.save_title"

                                v-bind:two-bg="temp.data.two_bg"
                                v-bind:two-border="temp.data.two_border"
                                v-bind:two-color="temp.data.two_color"
                                v-bind:two-radius="temp.data.two_radius"
                                v-bind:two-title="temp.data.two_title"
                                v-bind:two-icon="temp.data.two_icon"
                                v-bind:sub-title="temp.data.sub_title"
                                v-bind:sub-title-color="temp.data.sub_title_color"
                                v-bind:select-style="temp.data.select_style"
                            ></app-customer>
                        </template>

                        <template v-else-if="temp.id === 'module' && is_module">
                            <app-module
                                v-bind:tab-type="temp.data.tabType"
                                v-bind:tab-color="temp.data.tabColor"
                                v-bind:text-color="temp.data.textColor"
                                v-bind:tab-background="temp.data.tabBackground"
                                v-bind:list="temp.data.list"
                                v-bind:d-index="[index, temp_index]"
                                v-bind:theme="theme"
                                v-bind:page-hide="pageHide"
                                v-bind:home-pages="homePages"
                                v-bind:is_storage="is_storage"
                                v-bind:page_id="page_id"
                                v-bind:is_required="is_required"
                                v-bind:coupon_req="coupon_req"
                                @buyProduct="buyProduct"
                                :fixed="true"
                            ></app-module>
                        </template>
                        <template v-else-if="temp.id === 'access_limit'">
                            <view style="background:#FFFFFF;width: 100vw;padding-top: 26%"
                                  :style="{height: 'calc(100vh - ' + hiddenHeight('top') + ' - ' + bottomHeight + ')'}"
                                  class="dir-top-nowrap cross-center">
                                <image :src="diyImg.access_limit" style="height: 240rpx;width:240rpx;display: block"/>
                                <view style="color:#999999;font-size: 26rpx;margin-top: 20rpx">该页面暂无权限访问</view>
                            </view>
                        </template>
                    </block>
                </template>
            </block>
        </view>
    </view>
</template>

<script>
import {mapGetters, mapState} from 'vuex';
import appDiyList from '../../page-component/index/app-diy-list.vue';
import appSearchFor from '../../page-component/app-search-for/app-search-for.vue';
import appSwiper from '../../page-component/app-swiper/app-swiper.vue';
import uSwiper from '../../page-component/app-swiper/swiper.vue';
import uAnnouncement from '../../page-component/u-announcement/u-announcement.vue';
import appNavigationIcon from '../../page-component/app-navigation-icon/app-navigation-icon.vue';
import appNavigationTwoIcon from '../../page-component/app-navigation-icon/app-navigation-two-icon.vue';
import appVideo from '../../page-component/app-video/app-video.vue';
import appAssociatedLink from '../../page-component/app-associated-link/app-associated-link.vue';
import appSpecialTopic from '../../page-component/app-special-topic/app-special-topic-normal.vue';
import appSpecialTopicList from '../../page-component/app-special-topic/app-special-topic-list.vue';
import appImageAd from '../../page-component/app-image-ad/app-image-ad.vue';
import appHotspot from '../../basic-component/app-hotspot/app-hotspot.vue';
import appShop from '../../page-component/app-shop/app-shop.vue';
import appCopyright from '../../page-component/app-copyright/app-copyright.vue';
import appUserCenter from '../../page-component/app-user-center-top/app-user-center-top.vue';
import appMyOrder from '../../page-component/app-my-order/app-my-order.vue';
import appRecommendedProductList from '../../page-component/app-recommended-product/app-recommended-product-list.vue';
import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
import appExclusiveCouponTwo from '../../page-component/app-exclusive-coupon/app-exclusive-coupon-two.vue';
import appDiyTimer from '../../page-component/app-diy-timer/app-diy-timer.vue';
import appGoodsShop from '../../page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue';
import appEmpty from '../../basic-component/app-empty/app-empty.vue';
import appPopupAd from '../../page-component/app-popup-ad/app-popup-ad.vue';
import appDiyForm from "../../page-component/app-diy-form/app-diy-form.vue";
import appQuickNavigation from '../../page-component/app-quick-navigation/app-quick-navigation.vue';
import appCheckIn from '../../page-component/app-check-in/app-check-in.vue';
import appRich from '../../basic-component/app-rich/parse.vue';
import appReservation from "../../page-component/app-reservation/app-reservation.vue";
import diyForm from "../../page-component/diy-form/diy-form.vue";
import appVipCard from "../../page-component/app-vip-card/app-vip-card.vue";
import appAd from "../../page-component/app-ad/app-ad.vue";
// #ifdef MP
import appModule from "../../page-component/index/app-module.vue";
// #endif
import appDiyMGoodsList from '../../page-component/app-diy-goods-list/app-diy-m-goods-list.vue';
import appCustomer from '../../page-component/app-customer/app-customer.vue';
// #ifdef MP-WEIXIN
import appLive from "../../page-component/app-live/app-live.vue";
// #endif
// #ifndef MP-TOUTIAO
import appMap from "../../page-component/app-map/app-map.vue";
// #endif

export default {
    name: "app-diy-page",
    components: {
        appDiyList,
        'app-search-for': appSearchFor,
        'app-swiper': appSwiper,
        uAnnouncement,
        'app-navigation-icon': appNavigationIcon,
        'app-navigation-two-icon': appNavigationTwoIcon,
        'app-video': appVideo,
        'app-associated-link': appAssociatedLink,
        'app-special-topic': appSpecialTopic,
        'app-special-topic-list': appSpecialTopicList,
        'app-image-ad': appImageAd,
        'app-hotspot': appHotspot,
        'app-shop': appShop,
        'app-copyright': appCopyright,
        'app-user-center': appUserCenter,
        'app-my-order': appMyOrder,
        'app-recommended-product-list': appRecommendedProductList,
        'app-exclusive-coupon': appExclusiveCoupon,
        appExclusiveCouponTwo,
        'app-diy-timer': appDiyTimer,
        'app-goods-shop': appGoodsShop,
        'app-empty': appEmpty,
        'app-popup-ad': appPopupAd,
        'app-quick-navigation': appQuickNavigation,
        'app-check-in': appCheckIn,
        'app-rich': appRich,
        'app-reservation': appReservation,
        'diy-form': diyForm,
        'app-diy-form': appDiyForm,
        'app-vip-card': appVipCard,
        appDiyMGoodsList,
        // #ifndef MP-TOUTIAO
        appMap,
        // #endif
        appAd,
        // #ifdef MP
        appModule,
        // #endif
        // #ifdef MP-WEIXIN
        appLive,
        // #endif
        uSwiper,
        appCustomer
    },
    props: {
        dIndex: {
            type: Array,
            default() {
                return [0, 0];
            }
        },
        dType: String, //module 模块
        homePages: {
            type: Object,
            default() {
                return {
                    navs: []
                };
            }
        },
        scrollTop: {
            type: Number,
            default() {
                return 0;
            }
        },
        is_storage: Boolean,
        pageHide: Boolean,
        hasTabs: Boolean,
        theme: Object,
        coupon_req: Boolean,
        is_required: Boolean,
        scroll: Number,
        page_id: Number,
        is_module: {
            type: Boolean,
            default() {
                return true;
            }
        }
    },
    computed: {
        hiddenHeight() {
            return (type) => {
                // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO
                if(type === 'top'){
                    let barHeight = this.systemInfo.statusBarHeight + this.mBarHeight;
                    return barHeight + 'px';
                }
                // #endif
                return 0 + 'px';
            }
        },
        newData() {
            if (this.homePages) {
                let homePages = JSON.parse(JSON.stringify(this.homePages));
                if(homePages.navs && Array.isArray(homePages.navs)) {
                    for(let item of homePages.navs) {
                        for(let temp of item.template.data) {
                            if(temp.id == 'goods' && temp.data.showCat) {
                                temp.data.activeCurrent = 0;
                                temp.data.scrollLeft = 0;
                                for(let cat of temp.data.catList) {
                                    if(cat.goodsList) {
                                        for(let goods of cat.goodsList) {
                                            if(goods.is_negotiable != 1) {
                                                goods.priceList = this.handlePrice(goods.price);
                                                if(goods.is_level === 1 && (goods.level_price > 0 || goods.level_price == 0)) {
                                                    goods.memberList = this.handlePrice(goods.level_price);
                                                }
                                            }else {
                                                goods.priceList = this.handlePrice(this.appSetting.negotiable_text);
                                            }
                                        }
                                    }
                                }
                                temp.data.list = temp.data.catList && temp.data.catList.length > 0? temp.data.catList[0].goodsList : [];
                            }
                        }
                    }
                }
                if (homePages.title) {
                    uni.setNavigationBarTitle({
                        title: homePages.title,
                    });
                }
                return homePages;
            } else {
                return {
                    navs: [],
                }
            }
        },
        ...mapState({
            tabBarNavs: state => state.mallConfig.navbar.navs,
            systemInfo: state => state.gConfig.systemInfo,
            userCenter: state => state.mallConfig.user_center,
            mBarHeight: state => state.gConfig.mBarHeight,
            appSetting: state => state.mallConfig.mall.setting,
            diyImg: state => state.mallConfig.__wxapp_img.diy,
        }),
        ...mapGetters({
            userInfo: 'user/info',
        }),
        ...mapGetters('iPhoneX', {
            BotHeight: 'getBotHeight',
            getEmpty: 'getEmpty',
        }),
        bottomHeight() {
            let s = this.tabBarNavs.find(item => {
                return item.url.indexOf('/pages/index/index') !== -1 && item.url.indexOf(`page_id=${this.page_id}`) !== -1
            })
            if (s) {
                return uni.upx2px(this.BotHeight) + 'px';
            } else {
                return 0 + 'px';
            }
        },
        pageScroll() {
            let style = '';
            console.log(uni.getSystemInfoSync(),this.scroll,this.hasTabs);
            let windowHeight = uni.getSystemInfoSync().windowHeight;
            let screenHeight = uni.getSystemInfoSync().screenHeight;
			// #ifdef MP-ALIPAY
			if (uni.getSystemInfoSync().screen) {
				screenHeight = uni.getSystemInfoSync().screen.height
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (screenHeight === 0) {
				screenHeight = windowHeight;
			}
			// #endif
            let titleBarHeight = uni.getSystemInfoSync().titleBarHeight;
            let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            let navigationBarHeight = uni.getSystemInfoSync().navigationBarHeight;
            // #ifdef H5
            let windowBottom = uni.getSystemInfoSync().windowBottom;
            let windowTop = uni.getSystemInfoSync().windowTop;
            // #endif
            if(this.scroll > 0) {
                // #ifdef H5 || MP-ALIPAY
                windowHeight = uni.getSystemInfoSync().safeArea.height;
                style += `height:calc(${windowHeight}px - ${this.scroll}px${this.hasTabs ? ' - env(safe-area-inset-bottom)' : ''});overflow-y: auto;`;
                // #endif
                // #ifndef H5

                // #ifdef MP-BAIDU
                if(uni.getSystemInfoSync().pixelRatio == 3) {
                    screenHeight = screenHeight + statusBarHeight;
                }
                // #endif

                style += `height:calc(${screenHeight}px - ${this.scroll}px${this.hasTabs ? ' - env(safe-area-inset-bottom)' : ''});overflow-y: auto;`;
                // #endif
            }else if(this.hasTabs) {
                // #ifdef MP-ALIPAY
                style += `height:calc(${windowHeight}px - 55px - env(safe-area-inset-bottom));overflow-y: auto;`;
                // #endif
                // #ifdef MP-BAIDU
                style += `height:calc(${screenHeight}px - 55px - ${navigationBarHeight + statusBarHeight}px - env(safe-area-inset-bottom));overflow-y: auto;`;
                // #endif
                // #ifdef H5
                if(!this.isWechat) {
                    windowHeight = uni.getSystemInfoSync().safeArea.height;
                }
                style += `height:calc(${windowHeight}px - 55px - ${windowBottom + windowTop}px - env(safe-area-inset-bottom));overflow-y: auto;`;
                // #endif
                // #ifndef MP-ALIPAY || H5 || MP-BAIDU
                style += `height:calc(${screenHeight}px - 55px - env(safe-area-inset-bottom));overflow-y: auto;`;
                // #endif
            }
            return style
        },
        diyFormSubmitUrl() {
            return this.$api.diy.page_store;
        },
        // #ifdef H5
        isWechat: function () {
            return this.$jwx.isWechat();
        },
        // #endif
    },
    // #ifdef H5
    beforeCreate: function () {
        this.$options.components.appModule = require('../../page-component/index/app-module.vue').default;
    },
    // #endif
    data() {
        return {
            nav_active: 0,
            mp_link_top: false,
            coupon_url: this.$api.diy.receive,
            coupon_params: {},
        };
    },

    filters: {
        getObje(data) {
            if (!data) return;
            return {
                template_id: data.template_id
            }
        }
    },
    methods: {
        // 复制而不是引用对象和数组
        cloneData(data) {
            return JSON.parse(JSON.stringify(data));
        },
        // 切换分类
        changeTopNav(index,item) {
            item.activeCurrent = index;
            item.list = item.catList[index].goodsList;
            this.$forceUpdate();
            /////////
            let left = 0;
            for (let i = 0; i < item.catList.length; i++) {
                if (i === index) {
                    left = left + item.catList[i].width / 2;
                    break;
                } else {
                    left += item.catList[i].width + uni.upx2px(44);
                }
            }
            item.scrollLeft = left - uni.upx2px(750 / 2 - 40) || 0;
        },
        changeNav(index) {
            this.nav_active = index;
            this.mp_link_top = false;
        },
        rubikHotspot(hotspot) {
            if (hotspot && hotspot.link) {
                hotspot.link.url = hotspot.link.value;
                hotspot.link.openType = hotspot.link.open_type;
            }
            return hotspot;
        },
        mpLink(position) {
            if (position === 'top') {
                this.mp_link_top = true;
            }
        },
        transLabelPosition(val) {
            val = Number(val);
            switch (val) {
                case 3:
                    return 'top';
                case 2:
                    return 'inset';
                default:
                    return 'left';
            }
        },
        transLabelBackgroundPosition(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'left top';
                case 2:
                    return 'center top';
                case 3:
                    return 'right top';
                case 4:
                    return 'left center';
                case 5:
                    return 'center center';
                case 6:
                    return 'right center';
                case 7:
                    return 'left bottom';
                case 8:
                    return 'center bottom';
                case 9:
                    return 'right bottom';
                default:
                    return 'center';
            }
        },
        transLabelBackgroundRepeat(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'no-repeat';
                case 2:
                    return 'repeat-x';
                case 3:
                    return 'repeat-y';
                case 4:
                    return 'repeat';
                default:
                    return 'no-repeat';
            }
        },
        mpLinkError() {
            this.mp_link_top = false;
        },

        buyProduct(data) {
            this.$emit('buyProduct', data);
        },
        // #ifdef H5
        openAttention() {
            this.$store.dispatch('user/showAttention', true);
            this.$store.dispatch('user/showAttentionTwo', true);
        },
        // #endif
    }
}
</script>

<style scoped lang="scss">
.app-diy-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.vip-card {
    padding: 0 #{24rpx};
}

//#ifdef MP-ALIPAY
.app-diy-page /deep/ .app-diy-page {
    position: static !important;
    z-index: auto !important;
}
//#endif
.u-scroll-view {
    white-space: nowrap;
    //width: 750upx;
    height: 80upx;
    .u-current-round {
        height: 56upx;
        width: auto;
        padding-top:0;
        padding-left: 24upx;
        padding-right: 24upx;
        border-radius: 30upx;
        line-height: 56upx;
        margin: 21.5upx 24upx;
    }
}
.u-nav-item {
    display: inline-block;
    padding-top:22upx;
    padding-bottom: 7upx;
    font-size: 32upx;
    margin-right: 52upx;
    white-space: nowrap;
    border-bottom: 4upx solid transparent;
}
.u-active-current-round {
    color: white;
}
.u-default-text {
    color: #666666;
}
.app-diy-page {
    width: 100%;
    height: 100%;
    .scroll {
        overflow-y: auto;
    }
    .nav-bar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1500;
        background-color: #ffffff;
        width: 100%;
        height: #{44px};
        padding: 0 #{30rpx};
        overflow-x: auto;
        border-bottom: #{1rpx} solid #e2e2e2;

        .nav-bar-one {
            width: auto;
            margin-right: #{30rpx};
            padding: 0 #{15rpx};

            &.active {
                border-bottom: #{4rpx} solid;
            }
        }

        &.mp_link_top {
            top: #{84px};
        }

        &.mp_link_top ~ .diy-template {
            margin-top: #{44px + 84px};
        }

        & ~ .diy-template {
            margin-top: #{44px};
        }
    }

    .mp-link-top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1500;
        width: 100%;
    }

    &.mp_link_top {
        margin-top: #{168rpx};
    }
}
/* #ifdef H5 */
.bd-attention {
    width: 100%;
    background-color: #ffffff;
    padding: 5upx 10upx 24upx 10upx;
    .bd-content {
        padding: 0 10upx 0 6upx;
        margin-top: 15upx;
    }
    .bd-logo {
        width:70upx;
        height: 70upx;
        margin-right: 15upx;
    }
    .bd-name {
        font-size: 28upx;
        color: #353535;
    }
    .bd-btn {
        width:110upx;
        height: 50upx;
        line-height: 50upx;
        font-size: 22upx;
        border: 1upx solid #009400;
        color: #009400;
        border-radius: 5upx;
        text-align: center;
        transform: rotateZ(360deg);
    }
}
/* #endif */

</style>
